<template>
  <!-- <div>
    <h3>注册</h3>
    <div>
      <div><img scr="" alt="" /></div>
      <div>
        <div>
          <div>
            <div>用户名</div>
            <div><input type="text" /></div>
          </div>
          <div>
            <div>密码</div>
            <div><input type="text" /></div>
          </div>
          <div>
            <div>再次输入密码</div>
            <div><input type="text" /></div>
          </div>
        </div>
      </div>
      <div><button>提交</button></div>
    </div>
  </div> -->
  <div class="container">
    <div class="register-box">
      <h2>用户注册</h2>
      <form>
        <div class="input-group">
          <input type="text" required placeholder="用户名" />
        </div>
        <div class="input-group">
          <input type="email" required placeholder="邮箱" />
        </div>
        <div class="input-group">
          <input type="password" required placeholder="密码" />
        </div>
        <div class="input-group">
          <input type="password" required placeholder="确认密码" />
        </div>
        <button type="submit">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
/* .container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
} */
.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./images/school.jpg');
  // background: linear-gradient(
  //   238deg,
  //   #ff0000,
  //   #ff8700,
  //   #ffd300,
  //   #deff0a,
  //   #a6ff00,
  //   #0aff99,
  //   #0aefff,
  //   #147df5,
  //   #580aff,
  //   #be0aff
  // );
  // background-size: 2000% 2000%;
  // animation: rainbow 18s ease infinite;
  backdrop-filter: blur(10px);
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
.register-box {
  background: rgba(255, 255, 255, 0.9);

  padding: 40px;

  border-radius: 10px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

  width: 400px;
}

h2 {
  text-align: center;

  margin-bottom: 30px;

  color: #333;
}

.input-group {
  position: relative;

  margin-bottom: 30px;
}

input {
  width: 100%;

  padding: 10px 0;

  font-size: 16px;

  border: none;

  border-bottom: 1px solid #999;

  outline: none;

  background: transparent;
}

label {
  position: absolute;

  top: 0;

  left: 0;

  padding: 10px 0;

  font-size: 16px;

  color: #666;

  pointer-events: none;

  transition: 0.5s;
}

input:focus ~ label,
input:valid ~ label {
  top: -20px;

  font-size: 12px;

  color: #4caf50;
}

input:focus {
  border-bottom: 2px solid #4caf50;
}

button {
  width: 100%;

  padding: 12px;

  background: #4caf50;

  color: white;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  font-size: 16px;

  transition: 0.3s;
}

button:hover {
  background: #45a049;
}
</style>
